<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="/libs/bootstrap/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="/libs/swiper/css/swiper.min.css"/>
		
		<link rel="stylesheet" type="text/css" href="/css/index.css"/>
	</head>
	<body>
		
		<!-- 头部 -->
		<header></header>
		<!-- 导航栏 -->
		
		
		<!-- 轮播图  swiper -->
		<div class="swiper">
			<div class="swiper-container">
				<!-- pddList模板 需要 -->
				<div class="swiper-wrapper" id="pddList"></div>
				<!-- 1、获取拼多多接口方法   ok -->
				<!-- 模板引擎   -->
				<!-- <script type="text/html" id="bannerImgTemplate">
					{{each data item}}
						<div class="swiper-slide">
							<a href="/html/detail.html">
								<img src="{{item.hd_url}}" alt="">
							</a>
						</div>
					{{/each}}
				</script> -->
				<script type="text/html" id="bannerImgTemplate">
						<div class="swiper-slide">
							<a href="/html/detail.html">
								<img src="{{data[2].hd_url}}" alt="">
							</a>
						</div>
						<div class="swiper-slide">
							<a href="/html/detail.html">
								<img src="{{data[3].hd_url}}" alt="">
							</a>
						</div>
						<div class="swiper-slide">
							<a href="/html/detail.html">
								<img src="{{data[8].hd_url}}" alt="">
							</a>
						</div>
						<div class="swiper-slide">
							<a href="/html/detail.html">
								<img src="{{data[11].hd_url}}" alt="">
							</a>
						</div>
				</script>
				
				<!-- 2、本地json的方法  -->
				<!-- <div class="swiper-wrapper" id="categoryList"></div> -->
				<!-- 模板 -->
					<!-- // 返回的数据是list数组  --【注】模板里不能写注释 -->
				<!-- <script type="text/html" id="ImgTemplate">
						{{each list item}}
							<div class="swiper-slide">
								<a href="/html/detail.html">
									<img src="{{item.src}}" alt="">
								</a>
							</div>
						{{/each}}
					</script> -->
				
				
			    
				<!-- 如果需要导航按钮 -->
				<div class="swiper-button swiper-button-prev"></div>
				<div class="swiper-button swiper-button-next"></div>
				
				<!-- 如果需要滚动条 -->
				<div class="swiper-scrollbar"></div>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination" id="changeSwiper"></div>
		</div>	
		
		
		<!-- 第一块图片内容区 -->
		<div class="picCont"></div>
		
		<!-- 1、获取拼多多接口方法  -->
		<!-- 模板引擎   -->
		<script type="text/html" id="picContTemplate">
			
				<div class="left">
					<div class="top">
						<a href="">
							<img src="{{data[5].hd_thumb_url}}" >
						</a>
					</div>
					<div class="bott">
						<a href="">
							<img src="{{data[6].hd_thumb_url}}" >
						</a>
					</div>
					
				</div>
				
				<div class="mid">
					<a href="">
					<img src="{{data[7].hd_thumb_url}}" >
					</a>
				</div>
				
				<div class="right">
					<div class="top">
						<a href="">
						<img src="{{data[3].hd_thumb_url}}" >
						</a>
					</div>
					<div class="bott">
						<a href="">
						<img src="{{data[4].hd_thumb_url}}" >
						</a>
					</div>
				</div>
			
		</script>
		
		
		<!-- 人气良品 -->
		
		<div class="hotGoods">
		
			<p class="hotTitle">人气良品</p>
		
			<ul id="hotGoodsUl"></ul>
			
			
			<script type="text/html" id="hotGoodsUlTemplate">
				{{each data item}}
					<li>
						<img src="{{item.hd_url}}" >
						<div class="coverInfo">
							<a href="/html/detail.html?id={{item.id}}" target="_blank">							
								<p class="money">￥{{item.group_price / 100}}</p>
								<p class="tle">{{ item.short_name}}</p>
								<p class="desc">{{ item.sales_tip}}</p>
								
							</a>
						</div>
						<div class="disc">
							<a class="who" href="/html/category.html" target="_blank">
								<img src="{{item.hd_url}}" >
								{{ item.short_name}}
							</a>
							<a class="goodsFavCount" href="#" >{{item.sales}}</a>	
						</div>
					</li>
				{{/each}}
			</script>
		
		
		</div>
		
		
		<!-- more -->
		<div id="pagers">
			<a href="/i/shop/" target="_blank" class="osm-more"></a>
		</div>
		
		
		
		<!-- 尾部 -->
		<footer></footer>
		
		
		
		<!-- 模块化js -->
		<script src="/libs/require/require.min.js" data-main="/js/index" ></script>
	</body>
</html>
